<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
<style>
body {
	font-family: 'Roboto Condensed', sans-serif;
	line-height: 1.5;
	background: url("http://karenmenezes.com/shapes-polygon/bg-cubes.png");
}

p {
	margin: 0 0 10px 0;
}

.wrap {
	color: #222;
	font-size: 24px;
}

.clip-svg {
	width: 0;
	height: 0;
}

.clip-caption {
	width: 100%;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
}

.clip-each {
	display: block;
	position: relative;
	-webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
	-webkit-clip-path: url("#hexagon-clip");
	clip-path: url("#hexagon-clip");
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
	margin: 0 auto;
}

a.clip-each:hover {
	background: #9E566E;
	-webkit-transition: all 0.25s ease-in;
	transition: all 0.25s ease-in;
}

.clip-solid {
	width: 300px;
	height: 300px;
	background-image: url("http://karenmenezes.com/shapes-polygon/clip-demo-img.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	background-color: #ad6996;
	background-blend-mode: hard-light;
	-webkit-transition: all 2.5s linear;
	transition: all 2.5s linear;
}

.clip-solid:after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-clip-path: polygon(100% 3%, 17% 100%, 100% 100%);
	clip-path: polygon(100% 3%, 17% 100%, 100% 100%);
	-webkit-clip-path: url("#triangle-clip");
	clip-path: url("#triangle-clip");
	background: #9E566E;
	z-index: 1;
	width: 100%;
	height: 155px;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	pointer-events: none;
}

.clip-solid:hover:after {
	height: 0;
	-webkit-transition: all 0.45s ease-in;
	transition: all 0.45s ease-in;
}

.clip-solid:hover .social-share-block {
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.social-share-block {
	position: absolute;
	bottom: 20px;
	right: 75px;
	color: #fff;
	font-size: 70%;
	z-index: 2;
}

.social-each {
	font-size: 80%;
}

.clip-gradient {
	background: #222;
	width: 160px;
	height: 160px;
}

.clip-gradient .clip-caption {
	color: #fff;
}

.clip-border {
	background: -webkit-linear-gradient(300deg, #aebcbf 0%, #6e7774 50%, #333 61%, #333 100%);
	background: linear-gradient(150deg, #aebcbf 0%,#6e7774 50%,#333 61%,#333 100%);
	width: 160px;
	height: 160px;
	margin-top: 7px;
	color: #222;
}

.clip-border::after {
	content: "";
	position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	bottom: 4%;
	margin: 0 auto;
	background: url("http://karenmenezes.com/shapes-polygon/bg-cubes.png");
	-webkit-transition: all 0.3s linear;
	transition: all 0.3s linear;
	-webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
	clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
	-webkit-clip-path: url("#hexagon-clip");
	clip-path: url("#hexagon-clip");
	z-index: -1;
}

.clip-tagline {
	display: block;
	color: #758C9B;
	text-decoration: none;
	text-align: center;
}

@media only screen and (min-width: 550px) {
	.wrap {
		display: table;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translateY(-50%) translateX(-50%);
		-webkit-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
	}

	.clip-block {
		display: table-cell;
		vertical-align: middle;
	}

	.clip-border {
		margin-top: 20px;
	}
}
</style>
</head>
<body>
<div class="wrap">
	<div class="clip-block">
		<div class="clip-each clip-solid">
			<div class="social-share-block">
                <span class="social-each"><strong>10</strong>
                </span> <span>&hearts;</span>
			</div>
		</div>
	</div> <!-- /clip-block -->

	<div class="clip-block">
		<a href="#" class="clip-each clip-gradient">
			<div class="clip-caption">work</div>
		</a>
		<a href="#" class="clip-each clip-border">
			<div class="clip-caption">life</div>
		</a>
	</div> <!-- /clip-block -->

	<div class="clip-block">
		<a href="#" class="clip-tagline">balance</a>
	</div> <!-- /clip-block -->
	<svg class="clip-svg">
		<defs>
			<clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox">
				<polygon points="0.25 0.05, 0.75 0.05, 1 0.5, 0.75 0.95, 0.25 0.95, 0 0.5" />
			</clipPath>
		</defs>
	</svg>

	<svg class="clip-svg">
		<defs>
			<clipPath id="triangle-clip" clipPathUnits="objectBoundingBox">
				<polygon points="1 0.03, 0.17 1, 1 1" />
			</clipPath>
		</defs>
	</svg>
</div> <!-- /wrap -->
</body>

</html>